<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sultana</title>
    <link rel="stylesheet" href="sultana.css">
</head>
<style>
    #nav {
        position: fixed;
        width: 20vw;
        height: 100vh;
        overflow-y: auto;
        padding: 2vw 0 0 2vw;
        box-shadow: 0 0 40px #CCC;
        border-right: 1px solid #BBB;
    }
    
    #main {
        padding: 0 30px;
    }
    
     :target {
        animation: targetmove 0.2s ease-out;
    }
    
    @keyframes targetmove {
        from {
            padding-top: 10vh;
        }
        to {
            padding-top: 0;
        }
    }
    
    td textarea {
        border: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        min-height: 6em;
        min-width: 50ch;
        background: transparent;
        margin: -6px -13px;
    }
</style>

<body>
    <div su-row>
        <div su-col style="--col:0.2">
            <div class="markdown-body" id="nav">
                <h3>Sultana 中文文档</h3>
                <h4>目录</h4>
                <ol>
                    <li><a href="#/intro">简介</a></li>
                    <li><a href="#/layout">布局</a>
                        <ol>
                            <li><a href="#/layout/row">横</a></li>
                            <li><a href="#/layout/col">纵</a></li>
                            <li><a href="#/layout/display">辅</a></li>
                            <li><a href="#/layout/flex">弹</a></li>
                        </ol>
                    </li>
                    <li><a href="#/button">按钮</a>
                        <ol>
                            <li><a href="#/button/input">普</a></li>
                            <li><a href="#/button/group">组</a></li>
                            <li><a href="#/button/menu">栏</a></li>
                            <li><a href="#/button/select">择</a></li>
                        </ol>
                    </li>
                    <li><a href="#/form">表单</a>
                        <ol>
                            <li><a href="#/form/check">选</a></li>
                            <li><a href="#/form/switch">闸</a></li>
                            <li><a href="#/form/star">评</a></li>
                            <li><a href="#/form/range">尺</a></li>
                            <li><a href="#/form/date">日</a></li>
                            <li><a href="#/form/range_pro">度</a></li>
                            <li><a href="#/form/star_pro">分</a></li>
                        </ol>
                    </li>
                    <li><a href="#/widget">可交互控件</a>
                        <ol>
                            <li><a href="#/widget/tooltip">提示</a></li>
                            <li><a href="#/widget/menu">导航</a></li>
                            <li><a href="#/widget/tree">树</a></li>
                            <li><a href="#/widget/carousel">轮播</a></li>
                        </ol>
                    </li>
                    <li><a href="#/others">其他</a>
                </ol>
            </div>
        </div>
        <div su-col style="--col:0.8" id="main" class="markdown-body">
            <div id="/intro">
                <div>
                    <h1>简介</h1>
                    <p>Sultana是个纯css原生组件样式框架。标签<code>div</code>只用来布局(配合css变量)，所有的元素组件都不会使用它，使得每个标签语义发挥作用。</p>
                </div>

            </div>

            <div id="/layout">
                <div>
                    <h1>布局</h1>
                    <p>Sultana通过css变量打造网格系统。和Bootstrap一样支持12列的布局。为几种不同尺寸的媒体查询范围创建了一个等级。由于是css变量，你也可以使用小数。保证一行的和为12即可。</p>
                    <h2>工作机制</h2>
                    <h3 id="/layout/row">横 su-row</h3>
                    <p>
                        <li><b>横</b>默认占整行。</li>
                    </p>
                    <h3 id="/layout/col">纵 su-col</h3>
                    <p>
                        <li>
                            <b>横</b><b>纵</b>交融。
                        </li>

                    </p>
                    <table>
                        <tr>
                            <td>su-col</td>
                            <td>特小屏(-,480px)</td>
                            <td>小屏(480px,720px)</td>
                            <td>中屏(720px,1200px)</td>
                            <td>大屏(1200px,+)</td>
                            <td>固定数值(覆盖以上变量)</td>
                        </tr>
                        <tr>
                            <td>css变量名</td>
                            <td></td>
                            <td><code>--sm</code></td>
                            <td><code>--md</code></td>
                            <td><code>--lg</code></td>
                            <td><code>--col</code></td>
                        </tr>
                        <tr>
                            <td>类型</td>
                            <td></td>
                            <td><code>int</code>(1 , 2 , ... , 12)</td>
                            <td><code>int</code>(1 , 2 , ... , 12)</td>
                            <td><code>int</code>(1 , 2 , ... , 12)</td>
                            <td><code>number</code>(90% , 0.3 , ...)</td>
                        </tr>

                    </table>
                    <h3 id="/layout/display">辅 --xx-v --xx-d </h3>
                    <p><code>--sm-v</code>代表sm visible</p>
                    <p><code>--lg-d</code>代表lg display</p>

                    <h4>示例</h4>
                </div>
                <textarea name="" id="" cols="80" rows="12">
<div su-row>
    <div su="primary" su-col style="--sm:3;--md:4;--lg:12;--sm-v:hidden"></div>
    <div su="light" su-col style="--sm:3.2;--md:4.5;--lg:12;"></div>
    <div su="info" su-col style="--sm:3.3;--lg:12;"></div>
</div>
<div su-row>
    <div su="warning" su-col style="--col:0.22;--sm-d:none"></div>
    <div su="info" su-col style="--col:0.33;"></div>
    <div su="primary" su-col style="--col:0.44;"></div>
</div>   
                </textarea>
                <div su-row>
                    <div su="primary" su-col style="--sm:3;--md:4;--lg:12;--sm-v:hidden">--sm:3;--md:4;--lg:12;--sm-v:hidden</div>
                    <div su="light" su-col style="--sm:3.2;--md:4.5;--lg:12;">--sm:3.2;--md:4.5;--lg:12;</div>
                    <div su="info" su-col style="--sm:3.3;--lg:12;">--sm:3.8;--lg:12;</div>
                </div>
                <div su-row>
                    <div su="warning" su-col style="--col:0.22;--sm-d:none">--col:0.22;--sm-d:none</div>
                    <div su="info" su-col style="--col:0.33;">--col:0.33;</div>
                    <div su="primary" su-col style="--col:0.44;">--col:0.44;</div>
                </div>
                <div>
                    <h3 id="/layout/flex">弹 su-flex</h3>
                    <p>
                        <li>
                            <b>弹</b>的<code>display:flex</code>。
                        </li>
                        缩写参照：
                        <ol>
                            <li>j=justify,a=algin,c=content</li>
                            <li>100,001,010,101=start,end,center,between</li>
                            <li>-row=row-reverse</li>
                            <li>-warp=warp-reverse</li>
                            <li>!warp=no-warp</li>
                        </ol>

                    </p>
                    <h4>示例</h4>
                </div>
                <ul>
                    <li>
                        <textarea name="" id="" cols="80" rows="6">
<div su-flex="row !wrap jc-100 ai-100 ac-100">
    <div su="warning">1-1</div>
    <div su="info">1-2</div>
    <div su="primary">1-3</div>
</div>   
                        </textarea>
                        <div su-flex="row !wrap jc-100 ai-100 ac-100">
                            <div su="warning">1-1</div>
                            <div su="info">1-2</div>
                            <div su="primary">1-3</div>
                        </div>
                    </li>
                    <hr>
                    <li>
                        <textarea name="" id="" cols="80" rows="6">
<div su-flex="-row wrap jc-001 ai-001 ac-001">
    <div su="warning">2-1</div>
    <div su="info">2-2</div>
    <div su="primary">2-3</div>
</div>
                        </textarea>
                        <div su-flex="-row wrap jc-001 ai-001 ac-001">
                            <div su="warning">2-1</div>
                            <div su="info">2-2</div>
                            <div su="primary">2-3</div>
                        </div>
                    </li>
                    <hr>
                    <li>
                        <textarea name="" id="" cols="80" rows="6">
<div su-flex="col -wrap jc-010 ai-010 ac-010">
    <div su="warning">3-1</div>
    <div su="info">3-2</div>
    <div su="primary">3-3</div>
</div>
                        </textarea>
                        <div su-flex="col -wrap jc-010 ai-010 ac-010">
                            <div su="warning">3-1</div>
                            <div su="info">3-2</div>
                            <div su="primary">3-3</div>
                        </div>
                    </li>
                    <hr>
                    <li>
                        <textarea name="" id="" cols="80" rows="6">
<div su-flex="-col jc-101 ai-baseline ac-101">
    <div su="warning">4-1</div>
    <div su="info">4-2</div>
    <div su="primary">4-3</div>
</div>
                        </textarea>
                        <div su-flex="-col jc-101 ai-baseline ac-101">
                            <div su="warning">4-1</div>
                            <div su="info">4-2</div>
                            <div su="primary">4-3</div>
                        </div>
                    </li>
                    <hr>
                    <li>
                        <textarea name="" id="" cols="80" rows="6">
<div su-flex="jc-around ai-stretch ac-around">
    <div su="warning">5-1</div>
    <div su="info">5-2</div>
    <div su="primary">5-3</div>
</div>
                            </textarea>
                        <div su-flex="jc-around ai-stretch ac-around">
                            <div su="warning">5-1</div>
                            <div su="info">5-2</div>
                            <div su="primary">5-3</div>
                        </div>
                    </li>
                    <hr>
                    <li>
                        <textarea name="" id="" cols="80" rows="6">
<div su-flex="ac-stretch">
    <div su="warning">6-1</div>
    <div su="info">6-2</div>
    <div su="primary">6-3</div>
</div>
                        </textarea>
                        <div su-flex="ac-stretch">
                            <div su="warning">6-1</div>
                            <div su="info">6-2</div>
                            <div su="primary">6-3</div>
                        </div>
                    </li>
                </ul>
            </div>



            <div>
                <h1 id="/button">按钮</h1>
                <h2 id="/button/input">普</h2>
                <div>
                    <table>
                        <tr>
                            <td>button[su]</td>
                            <td><button su>Button</button></td>
                        </tr>
                        <tr>
                            <td>button[su][disabled]</td>
                            <td><button su disabled>disabled</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="light"]</td>
                            <td><button su="light">light</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="primary"]</td>
                            <td><button su="primary">primary</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="link"]</td>
                            <td><button su="link">link</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="info"]</td>
                            <td><button su="info">info</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="success"]</td>
                            <td><button su="success">success</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="warning"]</td>
                            <td><button su="warning">warning</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="danger"]</td>
                            <td><button su="danger">danger</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="outlined"]</td>
                            <td><button su="outlined">outlined</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="rounded"]</td>
                            <td><button su="rounded">rounded</button></td>
                        </tr>
                        <tr>
                            <td>button[su~="circle"]</td>
                            <td><button su="circle">★</button></td>
                        </tr>
                    </table>
                </div>
                <h2 id="/button/group">组</h2>
                <textarea cols="80" rows="20">
<span su-group="-">
    <button su>1</button>
    <button su>2</button>
    <button su="primary">3</button>
    <button su>4</button>
    <button su>5</button>
    <button su>6</button>
    <button su>7</button>
</span>

<span su-group="|">
    <button su>1</button>
    <button su>2</button>
    <button su="primary">3</button>
    <button su>4</button>
    <button su>5</button>
    <button su>6</button>
    <button su>7</button>
</span>

<ul su-group>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
                </textarea>
                <div>
                    <span su-group="-">
                        <button su>1</button>
                        <button su>2</button>
                        <button su="primary">3</button>
                        <button su>4</button>
                        <button su>5</button>
                        <button su>6</button>
                        <button su>7</button>
                    </span>

                    <span su-group="|">
                        <button su>1</button>
                        <button su>2</button>
                        <button su="primary">3</button>
                        <button su>4</button>
                        <button su>5</button>
                        <button su>6</button>
                        <button su>7</button>
                    </span>

                    <ul su-group>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </div>

                <h2 id="/button/menu">栏</h2>
                <textarea name="" id="" cols="80" rows="12">
<button su="outlined -">
    <a href="javascript:">forcus menu</a>
    <ul>
        <li><a href="javascript:">vsdvsdv</a></li>
        <li><a href="javascript:">sdvdsv</a></li>
        <li><a href="javascript:">sdvdsv</a></li>
        <li><a href="javascript:">sdvdsv</a></li>
        <hr>
        <li><a href="javascript:">sdvdsv</a></li>
    </ul>
</button>
                </textarea>
                <div style="height:150px;">
                    <button su="outlined -">
                        <a href="javascript:">forcus menu</a>
                        <ul>
                            <li><a href="javascript:">vsdvsdv</a></li>
                            <li><a href="javascript:">sdvdsv</a></li>
                            <li><a href="javascript:">sdvdsv</a></li>
                            <li><a href="javascript:">sdvdsv</a></li>
                            <hr>
                            <li><a href="javascript:">sdvdsv</a></li>
                        </ul>
                    </button>
                </div>
                <h2 id="/button/select">择</h2>
                <textarea name="" id="" cols="80" rows="12">
<button su="outlined -">
    <a href="javascript:">(blank)</a>
    <ul>
        <input checked type="radio" name="ra" value=""/>
        <span>(blank)</span>
        <input title="A.dada" type="radio" name="ra" value="1"/>
        <span>A.da</span>
        <input title="B.huha" type="radio" name="ra" value="2"/>
        <span >B.la</span>
    </ul>
</button>
                </textarea>
                <div style="height:150px;">
                    <button su="outlined -">
                        <a href="javascript:">(blank)</a>
                        <ul>
                            <input checked type="radio" name="ra" value=""/>
                            <span>(blank)</span>
                            <input title="A.dada" type="radio" name="ra" value="1"/>
                            <span>A.da</span>
                            <input title="B.huha" type="radio" name="ra" value="2"/>
                            <span >B.la</span>
                        </ul>
                    </button>
                </div>
            </div>

            <div>
                <h1 id="/form">表单 </h1>
                <h2 id="/form/check">选</h2>
                <textarea name="" id="" cols="80" rows="9">
<label su-input>
    <input su type="checkbox"/>
    <span>check</span>
</label>
<label su-input>
    <input su type="radio" name="ra"/>
    <span>radio1</span>
</label>
                </textarea>
                <br>
                <label su-input>
                    <input su type="checkbox"/>
                    <span>check</span>
                </label>
                <br>
                <label su-input>
                    <input su type="checkbox" disabled/>
                    <span>check</span>
                </label>
                <br>
                <label su-input>
                    <input su type="checkbox" disabled checked/>
                    <span>check</span>
                </label>
                <br>
                <label su-input>
                    <input su type="radio" name="ra"/>
                    <span>radio1</span>
                </label>
                <br>
                <label su-input>
                    <input su type="radio" name="ra"/>
                    <span>radio2</span>
                </label>
                <br>
                <label su-input>
                    <input su type="radio" disabled name="ra"/>
                    <span>radio1</span>
                </label>
                <br>
                <label su-input>
                    <input su type="radio" disabled checked name="ra"/>
                    <span>radio1</span>
                </label>
                <hr>

                <h2 id="/form/switch">闸</h2>
                <textarea name="" id="" cols="80" rows="5">
<label su-input>
    <input su="switch" type="checkbox">
    <span></span>
</label>
                </textarea>
                <br>
                <label su-input>
                    <input su="switch" type="checkbox">
                    <span></span>
                </label>
                <hr>
                <h2 id="/form/star">评</h2>
                <textarea name="" id="" cols="80" rows="4">
<input su="star" value="1" min="1" max="5"
 type="range" 
 onchange="this.setAttribute('value', this.value)" />
                </textarea>
                <br>
                <input su="star" value="1" min="1" max="5" type="range" onchange="this.setAttribute('value', this.value)" />
                <hr>
                <h2 id="/form/range">尺</h2>
                <textarea name="" id="" cols="80" rows="2">
<input su="primary" value="1" min="1" max="100" type="range" />
                </textarea>
                <br>
                <input su="range" value="1" min="1" max="100" type="range" />
                <hr>
                <h2 id="/form/date">日</h2>
                <form oninput="ymd.value=y.value+'-'+('0'+m.value).slice(-2)+'-'+d.value;ymd.dataset.leap=(y.value % 4 == 0) && (y.value % 100 != 0 || y.value % 400 == 0);ymd.dataset.day=new Date(y.value+'-'+('0'+m.value).slice(-2)+'-1').getDay()" onclick="ymd.value=y.value+'-'+('0'+m.value).slice(-2)+'-'+d.value"
                    onmouseover="ymd.dataset.day=new Date(y.value+'-'+('0'+m.value).slice(-2)+'-1').getDay()">
                    <label su-date>
            <input su type="date" name="ymd" readonly>
            <div>
                <input name="y" type="number" min="1970" max="3000" value="2000" onchange="this.setAttribute('value', this.value)">
                <input name="m" type="number" min="1" max="12" value="1" onchange="this.setAttribute('value', this.value)">
                <div>
                    <input name="d" type="radio" value="01" checked>
                    <input name="d" type="radio" value="02">
                    <input name="d" type="radio" value="03">
                    <input name="d" type="radio" value="04">
                    <input name="d" type="radio" value="05">
                    <input name="d" type="radio" value="06">
                    <input name="d" type="radio" value="07">
                    <input name="d" type="radio" value="08">
                    <input name="d" type="radio" value="09">
                    <input name="d" type="radio" value="10">
                    <input name="d" type="radio" value="11">
                    <input name="d" type="radio" value="12">
                    <input name="d" type="radio" value="13">
                    <input name="d" type="radio" value="14">
                    <input name="d" type="radio" value="15">
                    <input name="d" type="radio" value="16">
                    <input name="d" type="radio" value="17">
                    <input name="d" type="radio" value="18">
                    <input name="d" type="radio" value="19">
                    <input name="d" type="radio" value="20">
                    <input name="d" type="radio" value="21">
                    <input name="d" type="radio" value="22">
                    <input name="d" type="radio" value="23">
                    <input name="d" type="radio" value="24">
                    <input name="d" type="radio" value="25">
                    <input name="d" type="radio" value="26">
                    <input name="d" type="radio" value="27">
                    <input name="d" type="radio" value="28">
                    <input name="d" type="radio" value="29">
                    <input name="d" type="radio" value="30">
                    <input name="d" type="radio" value="31">
                </div>
            </div>
    </label>


                    <button su>submit</button>
                </form>
                <hr>
                <h2 id="/form/range_pro">度</h2>
                <textarea name="" id="" cols="80" rows="2">
<progress su max="100" value="80"></progress>
                </textarea>
                <br>
                <progress su max="100" value="80"></progress>
                <hr>
                <h2 id="/form/star_pro">分</h2>
                <textarea name="" id="" cols="80" rows="2">
<progress su="star" max="5" value="2"></progress>
                </textarea>
                <br>
                <progress su="star" max="5" value="2"></progress>
            </div>

            <h1 id="/widget">可交互控件</h1>
            <div>
                <h2 id="/widget/tooltip">提示</h2>
                <textarea name="" id="" cols="80" rows="2">
<button su su-hint="bottom-right" aria-label="tooltip"> bottom-right</button>
                </textarea>
                <br>
                <button su su-hint="bottom-right" aria-label="tooltip"> bottom-right</button>
                <button su su-hint="bottom" aria-label="tooltip"> bottom</button>
                <button su su-hint="bottom-left" aria-label="tooltip"> bottom-left</button>
                <br>
                <button su su-hint="right" aria-label="tooltip"> right</button>
                <button su su-hint="rounded" aria-label="tooltip">rounded</button>
                <button su su-hint="left" aria-label="tooltip"> left</button>
                <br>
                <button su su-hint="top-right" aria-label="tooltip"> top-right</button>
                <button su su-hint="top" aria-label="tooltip"> top</button>
                <button su su-hint="top-left" aria-label="tooltip"> top-left</button>
            </div>



            <div>
                <h2 id="/widget/menu">导航</h2>
                <textarea cols="80" rows="20">
<aside su="|" style="width:300px;">
    <p>General</p>
    <details>
        <summary disabled>Dashboard</summary>
    </details>
    <p>Administration</p>
    <details>
        <summary>Manage Your Team</summary>
    </details>
    <ul>
        <li>
            <details>
                <summary disabled>members</summary>
            </details>
        </li>
        <li>
            <details>
                <summary>Plugins</summary>
            </details>
            <ul>
                <li>
                <details>
                        <summary disabled>Sultana</summary>
                    </details>
                </li>
                <li>
                    <details>
                        <summary disabled>Bulma</summary>
                    </details>
                </li>
            </ul>
        </li>
    </ul>
    <p>Transactions</p>
    <details>
        <summary disabled>Payments</summary>
    </details>
</aside>
                </textarea>
                <aside su="|" style="width:300px;">
                    <p>General</p>
                    <details>
                        <summary disabled>Dashboard</summary>
                    </details>
                    <p>Administration</p>
                    <details>
                        <summary>Manage Your Team</summary>
                    </details>
                    <ul>
                        <li>
                            <details>
                                <summary disabled>members</summary>
                            </details>
                        </li>
                        <li>
                            <details>
                                <summary>Plugins</summary>
                            </details>
                            <ul>
                                <li>
                                    <details>
                                        <summary disabled>Sultana</summary>
                                    </details>
                                </li>
                                <li>
                                    <details>
                                        <summary disabled>Bulma</summary>
                                    </details>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <p>Transactions</p>
                    <details>
                        <summary disabled>Payments</summary>
                    </details>
                </aside>
            </div>
            <div>
                <h2 id="/widget/tree">树</h2>
                <textarea cols="80" rows="20">
<aside su="+" style="width:300px;">
    <details open>
        <summary>root</summary>
        <details>
            <summary>usr</summary>
            <details>
                <summary disabled>home</summary>
            </details>
            <details>
                <summary>www</summary>
                <details>
                    <summary disabled>config</summary>
                </details>
            </details>
        </details>
        <details>
            <summary>bin</summary>
            <details>
                <summary disabled>log</summary>
            </details>
        </details>
        <details>
            <summary disabled>test</summary>
        </details>
        <details>
            <summary disabled>dev</summary>
        </details>
    </details>
</aside>
                </textarea>
                <aside su="+" style="width:300px;">
                    <details open>
                        <summary>root</summary>
                        <details>
                            <summary>usr</summary>
                            <details>
                                <summary disabled>home</summary>
                            </details>
                            <details>
                                <summary>www</summary>
                                <details>
                                    <summary disabled>config</summary>
                                </details>
                            </details>
                        </details>
                        <details>
                            <summary>bin</summary>
                            <details>
                                <summary disabled>log</summary>
                            </details>
                        </details>
                        <details>
                            <summary disabled>test</summary>
                        </details>
                        <details>
                            <summary disabled>dev</summary>
                        </details>
                    </details>
                </aside>
                <hr>
                <textarea cols="80" rows="20">
<aside su="v" style="width:300px;">
    <details open>
        <summary>root</summary>
        <details>
            <summary>usr</summary>
            <details>
                <summary disabled>home</summary>
            </details>
            <details>
                <summary>www</summary>
                <details>
                    <summary disabled>config</summary>
                </details>
            </details>
        </details>
        <details>
            <summary>bin</summary>
            <details>
                <summary disabled>log</summary>
            </details>
        </details>
        <details>
            <summary disabled title="test.pdf">test.pdf</summary>
        </details>
        <details>
            <summary disabled>dev</summary>
        </details>
    </details>
</aside>
                </textarea>
                <aside su="v" style="width:300px;">
                    <details open>
                        <summary>root</summary>
                        <details>
                            <summary>usr</summary>
                            <details>
                                <summary disabled>home</summary>
                            </details>
                            <details>
                                <summary>www</summary>
                                <details>
                                    <summary disabled>config</summary>
                                </details>
                            </details>
                        </details>
                        <details>
                            <summary>bin</summary>
                            <details>
                                <summary disabled>log</summary>
                            </details>
                        </details>
                        <details>
                            <summary disabled title="test.pdf">test.pdf</summary>
                        </details>
                        <details>
                            <summary disabled>dev</summary>
                        </details>
                    </details>
                </aside>
            </div>
            <div>
                <h2 id="/widget/carousel">轮播</h2>
                <textarea cols="80" rows="20">
<aside su="." style="--w:400px;--h:300px;--p:20px;">
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <ul>
        <li style="background:gray;">
            <a>111</a>
        </li>
        <li style="background:orange;">
            <a>222</a>
        </li>
        <li style="background:teal;">
            <a>333</a>
        </li>
        <li style="background:blue;">
            <a>444</a>
        </li>
        <li style="background:black;">
            <a>555</a>
        </li>
    </ul>
</aside>
                </textarea>
                <div su-flex="row" style="height: 300px;line-height: 300px;">
                    <aside su="." style="--w:400px;--h:300px;--p:20px;">
                        <button></button>
                        <button></button>
                        <button></button>
                        <button></button>
                        <button></button>
                        <ul>
                            <li style="background:gray;">
                                <a>111</a>
                            </li>
                            <li style="background:orange;">
                                <a>222</a>
                            </li>
                            <li style="background:teal;">
                                <a>333</a>
                            </li>
                            <li style="background:blue;">
                                <a>444</a>
                            </li>
                            <li style="background:black;">
                                <a>555</a>
                            </li>
                        </ul>

                    </aside>
                </div>

            </div>
        </div>
    </div>